<template>
  <div
    class="dialog"
    v-if="show"
    v-loading.fullscreen.lock="loading"
    element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="body_wapper">
      <div class="body">
        <i
          class="el-icon-close"
          @click="
            show = false;
            $emit('close');
          "
        ></i>
        <div :style="personnel"></div>
        <!-- <dv-border-box-1> -->
        <rz-height :height="20" />
        <div class="content">
          <div class="list">
            <div class="item" v-for="(item, index) in data" :key="index">
              <div class="title">{{ item.bodyIndustry }}</div>
              <rz-height :height="15" />
              <div class="item1">
                <div class="item2">
                  <div>单位数</div>
                  <rz-height :height="6" />
                  <div>
                    <span class="text">{{ item.unitNums }}</span> 家
                  </div>
                </div>
                <div class="item2">
                  <div>检查次数</div>
                  <rz-height :height="6" />
                  <div>
                    <span class="text">{{ item.checkTimes }}</span
                    >次
                  </div>
                </div>
              </div>
              <rz-height :height="15" />
              <div class="item1">
                <div class="item2">
                  <div>整改复查</div>
                  <rz-height :height="6" />
                  <div>
                    <span class="text">{{ item.correctTimes }}</span
                    >次
                  </div>
                </div>
                <div class="item2">
                  <div>本月发证</div>
                  <rz-height :height="6" />
                  <div>
                    <span class="text">{{ item.issueNums }}</span
                    >家
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div :style="note1">单位主体分析</div>
        </div>
        <rz-height :height="20" />

        <el-row :gutter="20">
          <el-col :span="16">
            <div class="content">
              <div id="main6" style="width: 100%; height: 300px"></div>
              <div :style="note1">检查情况分析</div>
            </div></el-col
          >
          <el-col :span="8">
            <div class="content">
              <el-row>
                <el-col :span="16">
                  <div id="main7" style="width: 100%; height: 300px"></div>
                </el-col>
                <el-col :span="8" style="height: 300px">
                  <div class="numA">
                    <div>
                      <span style="font-size: 30px; color: #ef1415">D </span>
                      <span style="font-size: 14px">{{ data5.numD }}</span> 家
                      {{ data5.percentD }}
                    </div>

                    <div>
                      <span style="font-size: 30px; color: #fefd7a">C </span>
                      <span style="font-size: 14px">{{ data5.numC }}</span> 家
                      {{ data5.percentC }}
                    </div>
                    <div>
                      <span style="font-size: 30px; color: #80e7c5">B </span>
                      <span style="font-size: 14px">{{ data5.numB }}</span> 家
                      {{ data5.percentB }}
                    </div>
                    <div>
                      <span style="font-size: 30px; color: #3276d7">A </span
                      ><span style="font-size: 14px">{{ data5.numA }}</span> 家
                      {{ data5.percentA }}
                    </div>
                  </div>
                </el-col>
              </el-row>
              <div :style="note1">风险等级</div>
            </div>
          </el-col>
        </el-row>
        <rz-height :height="20" />
        <el-row :gutter="20">
          <el-col :span="16">
            <div class="content">
              <div id="main8" style="width: 100%; height: 300px"></div>
              <div :style="note1">各分局检查记录分析</div>
            </div></el-col
          >
          <el-col :span="8">
            <div class="content">
              <div id="main9" style="width: 100%; height: 300px"></div>
              <div :style="note1">
                发现问题<span style="color: red">TOP5</span>
              </div>
            </div>
          </el-col>
        </el-row>

        <rz-height :height="20" />
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="content">
              <div id="main10" style="width: 100%; height: 300px"></div>
              <div :style="note1">各月份检查分析</div>
            </div></el-col
          >
        </el-row>
        <!-- </dv-border-box-1> -->
      </div>
      <rz-height />
      <rz-height />
      <rz-height />
    </div>
  </div>
</template>
<script>
import Height from "../../../../components/height/height.vue";
var echarts = require("echarts");
import {
  unitDistribute,
  checkAnalyse,
  checkAnalyseByUnit,
  findProblemTop5,
  checkAnalyseEveryMonth,
  documentForRiskAnalyse,
} from "@/api/modules/home";

export default {
  // props:[],
  // 页面加载
  created() {},
  // 页面加载完成
  mounted() {
    Promise.all([
      this.getList(),
      this.getList1(),
      this.getList2(),
      this.getList3(),
      this.getList4(),
      this.getList5(),
    ]).then((res) => {
      console.log(res);
      this.data = res[0].data;
      this.data1 = res[1].data;
      this.data2 = res[2].data;
      this.data3 = res[3].data;
      this.data4 = res[4].data;
      this.data5 = res[5].data;

      console.log(
        this.data1.map((x) => {
          return {
            name: x.unitName,
            type: "bar",
            stack: "总量",
            data: x.checkVOS.map((x) => x.num),
            barWidth: 30,
          };
        })
      );

      this.pieChart();
      this.pieChart1();
      this.pieChart2();
      this.pieChart3();
      this.pieChart4();

      this.loading = false;
    });
  },
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      show: true,
      note1: {
        backgroundImage: "url(" + require("@/assets/images/item13.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        position: "absolute",
        left: "20px",
        paddingLeft: "10px",
        width: "170px",
        top: "0",
        transform: "translateY(-50%)",
        color: "white",
        fontSize: "14px",
        height: "25px",
        lineHeight: "24px",
      },
      personnel: {
        width: "500px",
        margin: "0 auto",
        backgroundImage: "url(" + require("@/assets/images/item18.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        height: "50px",
      },
      loading: true,
      data: [],
      data1: [],
      data2: [],
      data3: [],
      data4: [],
      data5: [],
    };
  },
  // 方法
  methods: {
    async getList() {
      return await unitDistribute({});
    },
    async getList1() {
      return await checkAnalyse({});
    },
    async getList2() {
      return await checkAnalyseByUnit({});
    },
    async getList3() {
      return await findProblemTop5({});
    },
    async getList4() {
      return await checkAnalyseEveryMonth({});
    },
    async getList5() {
      return await documentForRiskAnalyse({});
    },

    pieChart() {
      let option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          position: ["50%", "0"],
        },
        legend: {
          data: [
            "此次检查未发现违法违规行为和风险隐患问题；",
            "此次检查发现不符合监督检査要点表一般项目，存在轻微风险隐患，不涉及违法行为，责令当场改正，且已整改到位；",
            "此次检査发现不符合监督检查要点表相关项目，存在轻微违法违规行为，实施简易程序行政处罚， 并做出责令限期整改决定；",
            "此次检査发现不符合监督检査要点表相关项目，涉嫌违法违规，建议立案查处。",
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.data1.map((x) => x.unitName.replace("张家港市", "")),
          axisLabel: {
            rotate: 30, // 设置倾斜角度
            interval: 0, // 设置横坐标文字全部显示
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false, // Do not show grid lines
          },
        },
        series: [
          {
            name: "此次检查未发现违法违规行为和风险隐患问题；",
            type: "bar",
            stack: "总量",
            data: this.data1.map((x) => {
              return x.checkVOS[0].num;
            }),
            barWidth: 30,
          },
          {
            name: "此次检查发现不符合监督检査要点表一般项目，存在轻微风险隐患，不涉及违法行为，责令当场改正，且已整改到位；",
            type: "bar",
            stack: "总量",

            data: this.data1.map((x) => {
              return x.checkVOS[1].num;
            }),
            barWidth: 30,
          },
          {
            name: "此次检査发现不符合监督检查要点表相关项目，存在轻微违法违规行为，实施简易程序行政处罚， 并做出责令限期整改决定；",
            type: "bar",
            stack: "总量",

            data: this.data1.map((x) => {
              return x.checkVOS[2].num;
            }),
            barWidth: 30,
          },
          {
            name: "此次检査发现不符合监督检査要点表相关项目，涉嫌违法违规，建议立案查处。",
            type: "bar",
            stack: "总量",
            data: this.data1.map((x) => {
              return x.checkVOS[3].num;
            }),
            barWidth: 30,
          },
        ],
      };
      echarts.init(document.getElementById("main6"), "dark").setOption(option);
    },

    pieChart1() {
      let option = {
        tooltip: {
          trigger: "item",
          formatter(e) {
            return `${e.data.name} ${e.data.valueS} 家 占比${e.data.valueQ}`;
          },
        },
        backgroundColor: "transparent",
        //  <div><span style="font-size:30px;color:#EF1415">A </span><span style="font-size:14px">{{data5.numA}}</span> 家 {{data5.percentA}}</div>
        //                   <div><span style="font-size:30px;color:#FEFD7A">B </span> <span style="font-size:14px">{{data5.numB}}</span> 家 {{data5.percentB}}</div>
        //                   <div><span style="font-size:30px;color:#80E7C5">C </span> <span style="font-size:14px">{{data5.numC}}</span> 家 {{data5.percentC}}</div>
        //                   <div><span style="font-size:30px;color:#3276D7">D

        series: [
          {
            name: "Funnel",
            type: "funnel",
            left: "10%",
            top: 10,
            bottom: 0,
            width: "80%",
            min: 0,
            max: 100,
            minSize: "100%",
            maxSize: "0%",
            sort: "descending",
            gap: 0,
            label: {
              show: true,
              position: "inside",
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: "solid",
              },
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 0,
            },
            emphasis: {
              label: {
                fontSize: 20,
              },
            },
            data: [
              {
                value: 25,
                name: "A",
                valueS: this.data5.numA,
                valueQ: this.data5.percentA,
                itemStyle: {
                  color: "#3276D7",
                },
                label: {
                  color: "#fff",

                  fontSize: 20,
                },
              },
              {
                value: 50,
                name: "B",
                valueS: this.data5.numB,
                valueQ: this.data5.percentB,
                itemStyle: {
                  color: "#80E7C5",
                },
                label: {
                  color: "#fff",

                  fontSize: 20,
                },
              },
              {
                value: 75,
                name: "C",
                valueS: this.data5.numC,
                valueQ: this.data5.percentC,
                itemStyle: {
                  color: "#FEFD7A",
                },
                label: {
                  color: "#fff",

                  fontSize: 20,
                },
              },
              {
                name: "D",
                valueS: this.data5.numD,
                valueQ: this.data5.percentD,
                value: 100,
                itemStyle: {
                  color: "#EF1415",
                },
                label: {
                  color: "#fff",

                  fontSize: 20,
                },
              },
            ],
          },
        ],
      };
      echarts.init(document.getElementById("main7"), "dark").setOption(option);
    },
    pieChart2() {
      let option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: [
            // "小餐饮备案",
            // "预包装备案",
            "食品生产企业",
            "食品销售经营者",
            "餐饮服务经营者",
            "集中用餐单位食堂",
            "食用农产品市场",
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.data2.map((x) => x.unitName.replace("张家港市", "")),
          axisLabel: {
            rotate: 30, // 设置倾斜角度
            interval: 0, // 设置横坐标文字全部显示
          },
        },
        yAxis: {
          splitLine: {
            show: false, // Do not show grid lines
          },
          type: "value",
        },
        series: [
          // {
          //   name: "小餐饮备案",
          //   type: "bar",
          //   data: this.data2.map((x) => {
          //     return x.checkVOS[4].num;
          //   }),
          // },

          // {
          //   name: "预包装备案",
          //   type: "bar",
          //   data: this.data2.map((x) => {
          //     return x.checkVOS[5].num;
          //   }),
          // },
          // {
          //   name: "食用农产品市场",
          //   type: "bar",
          //   data: this.data2.map((x) => {
          //     return x.checkVOS[6].num;
          //   }),
          // },
          {
            name: "食品生产企业",
            type: "bar",
            data: this.data2.map((x) => {
              return x.checkVOS[0].num;
            }),
          },
          {
            name: "食品销售经营者",
            type: "bar",
            data: this.data2.map((x) => {
              return x.checkVOS[1].num;
            }),
          },
          {
            name: "餐饮服务经营者",
            type: "bar",
            data: this.data2.map((x) => {
              return x.checkVOS[2].num;
            }),
          },
          {
            name: "集中用餐单位食堂",
            type: "bar",
            data: this.data2.map((x) => {
              return x.checkVOS[3].num;
            }),
          },
        ],
      };
      echarts.init(document.getElementById("main8"), "dark").setOption(option);
    },

    pieChart3() {
      var charts = {
        // 按顺序排列从大到小
        cityList: this.data3.map((x) => x.string.substring(0, 22) + "..."),
        cityData: this.data3.map((x) => x.num),
      };
      var top10CityList = charts.cityList;
      var top10CityData = charts.cityData;
      var color = ["#ff9500", "#02d8f9", "#027fff"];
      var color1 = ["#ffb349", "#70e9fc", "#4aa4ff"];

      let lineY = [];
      let lineT = [];
      for (var i = 0; i < charts.cityList.length; i++) {
        var x = i;
        if (x > 1) {
          x = 2;
        }
        var data = {
          name: charts.cityList[i],
          color: color[x],
          value: top10CityData[i],
          barGap: "-100%",
          itemStyle: {
            normal: {
              show: true,
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                  {
                    offset: 0,
                    color: color[x],
                  },
                  {
                    offset: 1,
                    color: color1[x],
                  },
                ],
                false
              ),
              barBorderRadius: 10,
            },
            emphasis: {
              shadowBlur: 15,
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
          },
        };
        var data1 = {
          value: top10CityData[0],
          itemStyle: {
            color: "transparent",
            barBorderRadius: 10,
          },
        };
        lineY.push(data);
        lineT.push(data1);
      }

      let option = {
        backgroundColor: "transparent",
        title: {
          show: false,
        },
        tooltip: {
          trigger: "item",
          formatter: (p) => {
            if (p.seriesName === "total") {
              return "";
            }
            return `${p.name}<br/>${p.value}`;
          },
        },
        grid: {
          borderWidth: 0,
          top: "10%",
          left: "5%",
          right: "15%",
          bottom: "3%",
        },
        color: color,
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              inside: false,
            },
            data: top10CityList,
          },
          {
            type: "category",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              inside: false,
              verticalAlign: "bottom",
              lineHeight: "40",
              textStyle: {
                color: "#b3ccf8",
                fontSize: "14",
                fontFamily: "PingFangSC-Regular",
              },
              formatter: function (val) {
                return `${val}`;
              },
            },
            splitArea: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            data: top10CityData.reverse(),
          },
        ],
        xAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        series: [
          {
            name: "total",
            type: "bar",
            zlevel: 1,
            barGap: "-100%",
            barWidth: "10px",
            data: lineT,
            legendHoverLink: false,
          },
          {
            name: "bar",
            type: "bar",
            zlevel: 2,
            barWidth: "10px",
            data: lineY,
            label: {
              normal: {
                color: "#b3ccf8",
                show: true,
                position: [0, "-24px"],
                textStyle: {
                  fontSize: 16,
                },
                formatter: function (a) {
                  let num = "";
                  let str = "";
                  if (a.dataIndex + 1 < 10) {
                    num = "0" + (a.dataIndex + 1);
                  } else {
                    num = a.dataIndex + 1;
                  }
                  if (a.dataIndex === 0) {
                    str = `{color1|${num}} {color4|${a.name}}`;
                  } else if (a.dataIndex === 1) {
                    str = `{color2|${num}} {color4|${a.name}}`;
                  } else {
                    str = `{color3|${num}} {color4|${a.name}}`;
                  }
                  return str;
                },
                rich: {
                  color1: {
                    color: "#ff9500",
                    fontWeight: 700,
                  },
                  color2: {
                    color: "#02d8f9",
                    fontWeight: 700,
                  },
                  color3: {
                    color: "#027fff",
                    fontWeight: 700,
                  },
                  color4: {
                    color: "#e5eaff",
                  },
                },
              },
            },
          },
        ],
      };

      echarts.init(document.getElementById("main9"), "dark").setOption(option);
    },

    pieChart4() {
      let option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: [
            "市场监督管理局",
            "东城分局",
            "乐余分局",
            "凤凰分局",
            "南丰分局",
            "塘桥分局",
            "大新分局",
            "开发区分局",
            "西城分局",
            "锦丰分局",
             "政府部门",
            "总次数",
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.data4.map((x) => x.month + "月"),
        },
        yAxis: {
          splitLine: {
            show: false, // Do not show grid lines
          },
          type: "value",
        },
        series: [
          {
            name: "市场监督管理局",
            type: "bar",
            data: this.data4.map((x) => {
              return x.unitVOList[0].num;
            }),
          },
          {
            name: "东城分局",
            type: "bar",

            data: this.data4.map((x) => {
              return x.unitVOList[9].num;
            }),
          },
             {
            name: "政府部门",
            type: "bar",

            data: this.data4.map((x) => {
              return x.unitVOList[10].num;
            }),
          },
          {
            name: "乐余分局",
            type: "bar",

            data: this.data4.map((x) => {
              return x.unitVOList[2].num;
            }),
          },
           {
            name: "凤凰分局",
            type: "bar",

            data: this.data4.map((x) => {
              return x.unitVOList[4].num;
            }),
          },
          {
            name: "塘桥分局",
            type: "bar",
            data: this.data4.map((x) => {
              return x.unitVOList[1].num;
            }),
          },
          {
            name: "南丰分局",
            type: "bar",
            data: this.data4.map((x) => {
              return x.unitVOList[6].num;
            }),
          },
          {
            name: "大新分局",
            type: "bar",
            data: this.data4.map((x) => {
              return x.unitVOList[7].num;
            }),
          },
          {
            name: "开发区分局",
            type: "bar",
            data: this.data4.map((x) => {
              return x.unitVOList[8].num;
            }),
          },
          {
            name: "西城分局",
            type: "bar",
            data: this.data4.map((x) => {
              return x.unitVOList[5].num;
            }),
          },
          {
            name: "锦丰分局",
            type: "bar",
            data: this.data4.map((x) => {
              return x.unitVOList[2].num;
            }),
          },

          {
            name: "总次数",
            type: "line",
            data: this.data4.map((x) => x.totalNum),
          },
        ],
      };
      echarts.init(document.getElementById("main10"), "dark").setOption(option);
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: { Height },
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.dialog {
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  width: 100%;
  overflow: auto;

  .body_wapper {
    height: 100%;
    left: 5%;
    top: 5%;
    width: 90%;
    position: absolute;
    .body {
      background: url(../../../../assets/images/background.jpg);
      padding: 20px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .el-icon-close {
        color: #2760b5;
        font-size: 30px;
        border-radius: 30px;
        cursor: pointer;
        border: 2px solid #2760b5;
        position: absolute;
        right: 10px;
        top: 10px;
      }

      // .dv-border-box-1 {
      //   height: auto;
      .content {
        position: relative;
        padding: 20px 20px;
        background: url(../../../../assets/images/item10.png),
          url(../../../../assets/images/item8.png),
          url(../../../../assets/images/item9.png),
          url(../../../../assets/images/item11.png);
        background-position: top left, top right, bottom right, bottom left;
        background-repeat: no-repeat;
        border: 1px solid #1556ab;
        .list {
          color: #fff;
          display: flex;
          justify-content: space-around;

          .item {
            flex: 1;
            padding: 0 10px;
            // min-width: 150px;
            // flex-basis: 100px;
            // height: 90px;
            // display: flex;
            // flex-direction: column;
            // justify-content: center;
            // div {
            //   text-align: center;
            //   font-weight: 700;
            // }
            // cursor: pointer;
            .item1 {
              display: flex;
            }
            .item2 {
              display: flex;
              flex: 1;
              flex-direction: column;
              text-align: center;
              .text {
                font-size: 16px;
                color: #71f2f4;
              }
            }
            .title {
              font-size: 16px;
              background: url(../../../../assets/images/item12.png);
              text-align: center;
              background-size: 100% 100%;
              padding: 3px 0;
            }
          }
        }
        .numA {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          color: white;
        }
      }
      // }
    }
  }
}
</style>